<template>
  <div class="application-management">
    <TopNavigation :showOrganizationSection="false" :showTaskRoleSection="false" />
    <div class="page-header">
      <h2>应用管理</h2>
    </div>

    <div class="card">
      <div class="toolbar">
        <div class="search-container">
          <div class="input-group">
            <input type="text" class="input" placeholder="搜索应用名称" v-model="searchKeyword" @keyup.enter="searchApplications" />
            <button class="button--submit" @click="searchApplications">
              搜索
            </button>
          </div>
        </div>
        <button class="btn btn-primary" @click="showAddModal">新建应用</button>
      </div>

      <div class="table-container">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-state">
          <div class="spinner"></div>
          <p>加载中...</p>
        </div>

        <!-- 应用卡片网格 -->
        <div v-else class="applications-grid">
          <div v-for="app in paginatedApplications" :key="app.appId" class="application-card">
            <div class="application-header">
              <div class="application-info">
                <h3 class="application-name">{{ app.appName }}</h3>
                <p class="application-en-name">{{ app.appEnName }}</p>
              </div>
              <div class="application-actions">
                <button class="btn btn-edit" @click="showEditModal(app)" title="修改应用">
                  ✏️
                </button>
                <button class="btn btn-delete" @click="showDeleteConfirm(app)" title="删除应用">
                  🗑️
                </button>
              </div>
            </div>
            
            <div class="application-content">
              <div class="application-department">
                <span class="label">所属部门:</span>
                <span class="department-tag">{{ app.deptName || '未分配' }}</span>
              </div>
              
              <div class="application-description" v-if="app.appDesc">
                <span class="label">应用说明:</span>
                <p class="description-text">{{ app.appDesc }}</p>
              </div>
              <div class="application-description" v-else>
                <span class="label">应用说明:</span>
                <p class="description-text empty">暂无说明</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态提示 -->
        <div v-if="!loading && applications.length === 0" class="empty-state">
          <div class="empty-icon">📱</div>
          <div class="empty-text">暂无应用数据</div>
          <div class="empty-hint">点击上方按钮添加应用</div>
        </div>

        <!-- 分页 -->
        <div v-if="!loading && applications.length > 0" class="pagination-container">
          <div class="pagination">
            <button class="btn btn-default" :disabled="page === 1" @click="onPageChange(page - 1)">上一页</button>
            <span class="page-info">第 {{ page }} 页 / 共 {{ Math.ceil(totalItems / pageSize) }} 页</span>
            <button class="btn btn-default" :disabled="page >= Math.ceil(totalItems / pageSize)"
              @click="onPageChange(page + 1)">下一页</button>
            <div class="page-size-selector">
              <span>每页显示:</span>
              <select class="select" v-model="pageSize" @change="onPageSizeChange">
                <option :value="5">5条</option>
                <option :value="10">10条</option>
                <option :value="20">20条</option>
                <option :value="50">50条</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增/编辑应用模态框 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">{{ isEditMode ? '编辑应用' : '新建应用' }}</h3>
          <button class="btn btn-default" @click="closeModal">×</button>
        </div>
        <div class="modal-body">
          <!-- 错误信息显示区域 -->
          <div v-if="showError" class="error-message">
            <div class="error-icon">⚠️</div>
            <div class="error-text">{{ errorMessage }}</div>
          </div>

          <div class="form-item">
            <label class="form-label">应用中文名</label>
            <input type="text" class="input" v-model="formData.appName" placeholder="请输入应用中文名" />
          </div>
          <div class="form-item">
            <label class="form-label">应用英文名</label>
            <input type="text" class="input" v-model="formData.appEnName" placeholder="请输入应用英文名" />
          </div>
          <div class="form-item">
            <label class="form-label">应用说明</label>
            <textarea class="input" v-model="formData.appDesc" placeholder="请输入应用说明" rows="3"></textarea>
          </div>
          <div class="form-item">
            <label class="form-label">所属部门</label>
            <select class="select" v-model="formData.deptId" @change="onDeptChange">
              <option value="">请选择部门</option>
              <option v-for="dept in departments" :key="dept.id" :value="dept.id">{{ dept.name }}</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" @click="closeModal">取消</button>
          <button class="btn btn-primary" @click="saveApplication">{{ isEditMode ? '更新' : '确定' }}</button>
        </div>
      </div>
    </div>

    <!-- 删除确认模态框 -->
    <div v-if="showDeleteModal" class="modal">
      <div class="modal-content delete-modal">
        <div class="modal-header">
          <h3 class="modal-title">确认删除</h3>
          <button class="btn btn-default" @click="closeDeleteModal">×</button>
        </div>
        <div class="modal-body">
          <div class="delete-warning">
            <div class="warning-icon">🗑️</div>
            <div class="warning-text">
              <p>您确定要删除应用 <strong>"{{ deleteAppName }}"</strong> 吗？</p>
              <p class="warning-note">此操作不可撤销，请谨慎操作。</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" @click="closeDeleteModal">取消</button>
          <button class="btn btn-danger" @click="confirmDelete">确认删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TopNavigation from '../components/TopNavigation.vue'
import { ref, computed, onMounted } from 'vue'
import { applicationService } from '../services/applicationService.js'
import { departmentService } from '../services/departmentService.js'

// 初始化数据
const departments = ref([])
const applications = ref([])
const loading = ref(true)
const error = ref(null)

// 从API获取部门数据
const fetchDepartments = async () => {
  try {
    const response = await departmentService.getDepartments()
    console.log('Department response:', response); // 添加日志以便调试
    if (response.code === 200) {
      // 确保数据格式正确，部门对象应该有id和name属性
      departments.value = (response.data || []).map(dept => ({
        // 处理可能的属性名称差异
        id: dept.id || dept.departmentId || dept.deptId,
        name: dept.name || dept.deptName || '未命名部门'
      }));
      // 验证部门数据结构
      if (departments.value.length > 0 && (!departments.value[0].id || !departments.value[0].name)) {
        console.warn('部门数据格式可能不正确，期望包含id和name属性');
      }
    } else {
      throw new Error(response.message || '获取部门数据失败')
    }
  } catch (err) {
    error.value = err.message || '获取部门数据时发生错误'
    console.error('Failed to fetch departments:', err)
    showMessage(error.value, 'error')
  }
}

// 从API获取应用数据
const fetchApplications = async () => {
  try {
    loading.value = true
    
    // 构建分页参数
    const params = {
      page: page.value - 1, // 后端通常从0开始计数
      size: pageSize.value
    }
    
    // 添加搜索参数
    if (searchKeyword.value.trim()) {
      params.search = searchKeyword.value.trim()
    }
    
    const response = await applicationService.getApplications(params)
    if (response.code === 200) {
      applications.value = response.data?.content || response.data || []
      totalItems.value = response.data?.totalElements || response.data?.total || applications.value.length
    } else {
      throw new Error(response.message || '获取应用数据失败')
    }
  } catch (err) {
    error.value = err.message || '获取应用数据时发生错误'
    console.error('Failed to fetch applications:', err)
    showMessage(error.value, 'error')
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchDepartments()
  fetchApplications()
})

// 搜索关键词
const searchKeyword = ref('')

// 模态框相关状态
const showModal = ref(false)
const isEditMode = ref(false)
const currentApplicationId = ref(null)
const formData = ref({
  appName: '',
  appEnName: '',
  appDesc: '',
  deptId: '',
  deptName: ''
})

// 分页数据
const page = ref(1)
const pageSize = ref(10)
const totalItems = ref(0)

// 排序相关
const sortField = ref('')
const sortOrder = ref('asc') // 'asc' 或 'desc'

// 处理分页大小变化
const onPageSizeChange = () => {
  // 重置到第一页并重新获取数据
  page.value = 1
  fetchApplications()
}

// 处理页码变化
const onPageChange = (newPage) => {
  page.value = newPage
  fetchApplications()
}

// 排序函数
const sort = (field) => {
  if (sortField.value === field) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortField.value = field
    sortOrder.value = 'asc'
  }
}

// 显示的应用列表（前端分页）
const paginatedApplications = computed(() => {
  const startIndex = (page.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return applications.value.slice(startIndex, endIndex)
})

// 搜索应用
const searchApplications = () => {
  // 重置到第一页并重新获取数据
  page.value = 1
  fetchApplications()
}

// 处理部门选择变化
const onDeptChange = () => {
  if (formData.value.deptId) {
    const selectedDept = departments.value.find(dept => dept.id === formData.value.deptId)
    if (selectedDept) {
      formData.value.deptName = selectedDept.name
    }
  } else {
    formData.value.deptName = ''
  }
}

// 显示新增模态框
const showAddModal = async () => {
  isEditMode.value = false
  currentApplicationId.value = null
  formData.value = {
    appName: '',
    appEnName: '',
    appDesc: '',
    deptId: '',
    deptName: ''
  }

  // 确保部门数据已加载
  if (departments.value.length === 0) {
    await fetchDepartments();
  }

  showModal.value = true
}

// 显示编辑模态框
const showEditModal = async (app) => {
  isEditMode.value = true
  currentApplicationId.value = app.appId
  formData.value = {
    appName: app.appName,
    appEnName: app.appEnName,
    appDesc: app.appDesc,
    deptId: app.deptId || '',
    deptName: app.deptName
  }

  // 确保部门数据已加载
  if (departments.value.length === 0) {
    await fetchDepartments();
  }

  showModal.value = true
}

// 关闭模态框
const closeModal = () => {
  showModal.value = false
  // 清除错误信息
  errorMessage.value = ''
  showError.value = false
}

// 检查应用名称是否重复
const checkAppNameDuplicate = async () => {
  try {
    const appName = formData.value.appName.trim().toLowerCase()
    // 获取所有应用
    console.log('Checking app name duplicate for:', appName)
    const response = await applicationService.getApplications()
    console.log('API response:', response)

    // 验证响应数据
    if (!Array.isArray(response.data)) {
      console.error('Invalid response format: Expected array of apps', response)
      showMessage('获取应用列表格式错误', 'error')
      return true
    }

    const allApps = response.data
    console.log('All apps retrieved:', allApps.length)

    if (isEditMode.value) {
      // 编辑模式：排除当前应用
      const isDuplicate = allApps.some(app => {
        // 确保应用对象有必要的属性
        if (!app || !app.appId || !app.appName) {
          console.warn('Skipping invalid app object:', app)
          return false
        }
        return app.appId !== currentApplicationId.value && app.appName.toLowerCase() === appName
      })
      console.log('Name duplicate check result:', isDuplicate)
      return isDuplicate
    } else {
      // 新增模式：检查所有应用
      const isDuplicate = allApps.some(app => {
        // 确保应用对象有必要的属性
        if (!app || !app.appName) {
          console.warn('Skipping invalid app object:', app)
          return false
        }
        return app.appName.toLowerCase() === appName
      })
      console.log('Name duplicate check result:', isDuplicate)
      return isDuplicate
    }
  } catch (error) {
    console.error('Error checking app name duplicate:', error)
    showMessage('检查应用名称重复失败，请重试', 'error')
    // 出错时不阻止操作，允许用户尝试提交
    return false
  }
}

// 检查应用英文名是否重复
const checkAppEnNameDuplicate = async () => {
  try {
    const appEnName = formData.value.appEnName.trim().toLowerCase()
    // 获取所有应用
    console.log('Checking app English name duplicate for:', appEnName)
    const response = await applicationService.getApplications()
    console.log('API response:', response)

    // 验证响应数据
    if (!Array.isArray(response.data)) {
      console.error('Invalid response format: Expected array of apps', response)
      showMessage('获取应用列表格式错误', 'error')
      return true
    }

    const allApps = response.data
    console.log('All apps retrieved:', allApps.length)

    if (isEditMode.value) {
      // 编辑模式：排除当前应用
      const isDuplicate = allApps.some(app => {
        // 确保应用对象有必要的属性
        if (!app || !app.appId || !app.appEnName) {
          console.warn('Skipping invalid app object:', app)
          return false
        }
        return app.appId !== currentApplicationId.value && app.appEnName.toLowerCase() === appEnName
      })
      console.log('English name duplicate check result:', isDuplicate)
      return isDuplicate
    } else {
      // 新增模式：检查所有应用
      const isDuplicate = allApps.some(app => {
        // 确保应用对象有必要的属性
        if (!app || !app.appEnName) {
          console.warn('Skipping invalid app object:', app)
          return false
        }
        return app.appEnName.toLowerCase() === appEnName
      })
      console.log('English name duplicate check result:', isDuplicate)
      return isDuplicate
    }
  } catch (error) {
    console.error('Error checking app English name duplicate:', error)
    showMessage('检查应用英文名重复失败，请重试', 'error')
    // 出错时不阻止操作，允许用户尝试提交
    return false
  }
}

// 错误信息状态
const errorMessage = ref('')
const showError = ref(false)

// 删除确认弹窗状态
const showDeleteModal = ref(false)
const deleteAppId = ref(null)
const deleteAppName = ref('')

// 保存应用
const saveApplication = async () => {
  console.log('Starting save application process')
  // 清除之前的错误信息
  errorMessage.value = ''
  showError.value = false

  // 表单验证
  if (!formData.value.appName.trim()) {
    errorMessage.value = '请输入应用中文名'
    showError.value = true
    return
  }
  if (!formData.value.appEnName.trim()) {
    errorMessage.value = '请输入应用英文名'
    showError.value = true
    return
  }
  if (!formData.value.deptId) {
    errorMessage.value = '请选择所属部门'
    showError.value = true
    return
  }
  console.log('Form validation passed')

  // 检查名称重复
  const isNameDuplicate = await checkAppNameDuplicate()
  if (isNameDuplicate) {
    errorMessage.value = '应用名称已存在，请更换其他名称'
    showError.value = true
    return
  }

  // 检查英文名重复
  const isEnNameDuplicate = await checkAppEnNameDuplicate()
  if (isEnNameDuplicate) {
    errorMessage.value = '应用英文名已存在，请更换其他名称'
    showError.value = true
    return
  }

  try {
    if (isEditMode.value) {
      // 更新应用
      const response = await applicationService.updateApplication(currentApplicationId.value, {
        appName: formData.value.appName,
        appEnName: formData.value.appEnName,
        appDesc: formData.value.appDesc,
        deptId: formData.value.deptId,
        deptName: formData.value.deptName
      })
      if (response.code === 200) {
        // 重新获取应用数据以确保页面刷新
        await fetchApplications()
        showMessage('应用更新成功', 'success')
        closeModal()
      } else {
        throw new Error(response.message || '更新应用失败')
      }
    } else {
      // 新增应用
      console.log('Creating new application')
      const response = await applicationService.createApplication({
        appName: formData.value.appName,
        appEnName: formData.value.appEnName,
        appDesc: formData.value.appDesc,
        deptId: formData.value.deptId,
        deptName: formData.value.deptName
      })
      if (response.code === 201) {
        // 重新获取应用数据以确保页面刷新
        await fetchApplications()
        showMessage('应用创建成功', 'success')
        closeModal()
      } else {
        throw new Error(response.message || '创建应用失败')
      }
    }
  } catch (err) {
    console.error('Failed to save application:', err)
    errorMessage.value = err.message || '操作失败，请检查网络连接或联系管理员'
    showError.value = true
  }
}

// 显示删除确认弹窗
const showDeleteConfirm = (app) => {
  deleteAppId.value = app.appId
  deleteAppName.value = app.appName
  showDeleteModal.value = true
}

// 关闭删除确认弹窗
const closeDeleteModal = () => {
  showDeleteModal.value = false
  deleteAppId.value = null
  deleteAppName.value = ''
}

// 确认删除应用
const confirmDelete = async () => {
  try {
    const response = await applicationService.deleteApplication(deleteAppId.value)
    if (response.code === 200) {
      // 重新获取应用数据以确保页面刷新
      await fetchApplications()
      showMessage('应用删除成功', 'success')
      closeDeleteModal()
    } else {
      throw new Error(response.message || '删除应用失败')
    }
  } catch (err) {
    showMessage(err.message || '删除失败', 'error')
    console.error('Failed to delete application:', err)
  }
}

// 消息提示函数
const showMessage = (message, type = 'info') => {
  // 创建消息元素
  const msgElement = document.createElement('div')
  msgElement.className = `message message-${type}`
  msgElement.textContent = message

  // 添加到body
  document.body.appendChild(msgElement)

  // 3秒后移除
  setTimeout(() => {
    msgElement.style.opacity = '0'
    setTimeout(() => {
      document.body.removeChild(msgElement)
    }, 300)
  }, 3000)
}
</script>

<style scoped>
.application-management {
  width: 100%;
}

.page-header {
  margin-bottom: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.page-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* 继承全局样式 */
.card {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-base);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-base);
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.search-container {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex: 1;
  min-width: 280px;
}

/* 应用卡片网格布局 */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  padding: 24px;
}

/* 应用卡片样式 */
.application-card {
  background: var(--bg-white);
  border: 1px solid var(--border-base);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

.application-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

/* 应用卡片头部 */
.application-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.application-info {
  flex: 1;
  min-width: 0;
}

.application-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.3;
  word-break: break-word;
}

.application-en-name {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  font-style: italic;
  word-break: break-word;
}

/* 应用操作按钮 */
.application-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-edit,
.btn-delete {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-base);
  background: var(--bg-white);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.btn-edit:hover {
  background: #f0f9ff;
  border-color: #0ea5e9;
  transform: scale(1.05);
}

.btn-delete:hover {
  background: #fef2f2;
  border-color: #ef4444;
  transform: scale(1.05);
}

/* 应用内容区域 */
.application-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.application-department,
.application-description {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.department-tag {
  display: inline-block;
  background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
  color: #0277bd;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #81d4fa;
  max-width: fit-content;
}

.description-text {
  font-size: 14px;
  color: var(--text-regular);
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
}

.description-text.empty {
  color: var(--text-secondary);
  font-style: italic;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-secondary);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  margin: 20px 0;
  transition: all 0.3s ease;
}

.empty-state:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #94a3b8;
}

.empty-icon {
  font-size: 64px;
  opacity: 0.6;
  margin-bottom: var(--spacing-sm);
  transition: all 0.3s ease;
}

.empty-state:hover .empty-icon {
  transform: scale(1.1);
  opacity: 0.8;
}

.empty-text {
  font-size: 18px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

.empty-hint {
  font-size: 14px;
  color: #64748b;
  font-style: italic;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.loading-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-item {
  margin-bottom: var(--spacing-lg);
  transition: all 0.3s ease;
}

.form-item:focus-within {
  transform: translateX(5px);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--text-regular);
}

/* 排序相关样式 */
.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color 0.2s ease;
}

.sortable:hover {
  background-color: var(--bg-hover);
}

.sort-icon {
  margin-left: var(--spacing-xs);
  font-size: 12px;
  color: var(--primary-color);
}

/* 按钮样式增强 */
.btn {
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* 弹窗样式已移至 theme.css 统一管理 - VSCode简约风格 */
.flex-container {
  flex-wrap: wrap;
}

/* 弹窗内错误信息样式 */
.error-message {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  animation: errorFadeIn 0.3s ease;
}

.error-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.error-text {
  color: #dc2626;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  word-break: break-word;
}

@keyframes errorFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 删除确认弹窗样式 */
.delete-modal {
  max-width: 450px;
}

.delete-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: #fef3f2;
  border: 1px solid #fecaca;
  border-radius: var(--border-radius-md);
}

.warning-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.warning-text {
  flex: 1;
}

.warning-text p {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-primary);
  line-height: 1.5;
}

.warning-text p:last-child {
  margin-bottom: 0;
}

.warning-note {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

.warning-text strong {
  color: #dc2626;
  font-weight: 600;
}

/* 消息提示样式增强 */
.message {
  position: fixed;
  top: 80px;
  right: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.message-success {
  background-color: var(--success-color);
}

.message-error {
  background-color: var(--error-color);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .applications-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-container {
    width: 100%;
  }

  .applications-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 20px;
  }
  
  .application-card {
    padding: 20px;
  }
  
  .application-name {
    font-size: 16px;
  }
  
  .application-en-name {
    font-size: 12px;
  }

  .table th,
  .table td {
    padding: 8px var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /* 弹窗样式已移至 theme.css 统一管理 - VSCode简约风格 */

  .message {
    right: var(--spacing-md);
    left: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .application-management {
    padding: 8px;
  }

  .page-header h2 {
    font-size: 20px;
  }

  .card {
    border-radius: 12px;
  }
  
  .applications-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }
  
  .application-card {
    padding: 12px;
  }
  
  .application-name {
    font-size: 15px;
  }
  
  .application-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .application-actions {
    align-self: flex-end;
  }

  .btn {
    padding: 8px 16px;
    font-size: 12px;
  }

  /* 弹窗样式已移至 theme.css 统一管理 - VSCode简约风格 */
}
</style>